<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="zepto.js.gz"></script>
	<link rel="stylesheet" href="mini-nord.css.gz">
</head>

<body>
	<header>
		<a href="./index.html" class="button">状态</a>
		<a href="./wifi.html" class="button">无线</a>
		<a href="./mqtt.html" class="button">MQTT</a>
		<a href="./relay.html" class="button">继电器</a>
	</header>
	<br/>
	<div class="card">
		<p>CPU频率：
			<span id="cpu">0</span>
		</p>
		<p>总内存：
			<span id="mem">0</span>
		</p>
		<p>可用内存：
			<span id="mem_f">0</span>
		</p>
		<p>时间：
			<span id="date">0</span>
		</p>
		<p>温/湿度：
			<span id="th_v">0</span>
		</p>
	</div>
	<div>
		<form>
			<fieldset>
				<legend>设备</legend>
				<div class="input-group vertical">
					<label for="title">名称</label>
					<input type="text" id="title"></input>
				</div>
				<label>传感器类型</label>
				<select id="th" class="input-group vertical">
					<option value="sht1x" selected="selected">sht1x</option>
					<option value="sht21">sht21</option>
					<option value="ds18b20">ds18b20</option>
				</select>
				<p>
					<button id="th_type" class="primary">保存</button>
					<button id="reboot" class="secondary">重启</button>
				</p>
				<p id="progress"></p>
			</fieldset>
		</form>
	</div>
	<footer class="sticky">
		&copy; 2017
		<a href="#">yusp</a>
		QQ:475060921
	</footer>
</body>

</html>
<script>
	var ws;
	var uri = "ws://" + location.host + "/rpc/";
	$(document).ready(function () {
		function ws_connect() {
			ws = new WebSocket(uri);
			ws.onopen = function (ev) {
				console.log(ev);
				get_info();
			};
			ws.onclose = function (ev) {
				console.log(ev);
				setTimeout(ws_connect, 1000);
			};
			ws.onmessage = function (ev) {
				console.log('message', ev);
				try {
					var data = JSON.parse(ev.data);
					if (data.hasOwnProperty("error")) {
						console.log("server error:" + data.error.message);
					} else if (data.tag == "info") {
						msg_get_info(data);
					}
					else if (data.tag == "hi") {
						msg_hi(data);
					} else if (data.tag == "info_update") {
						msg_update_info(data);
					}
					else if (data.tag == "save_cfg") {
						msg_save_cfg();
					} else if (data.tag == "save") {
						alert("已保存。");
					}
				} catch (e) {
					console.log(e);
				}
			};
			ws.onerror = function (ev) {
				console.log(ev);
				ws.close();
			};
		}

		ws_connect();

		function get_info() {
			ws.send(JSON.stringify({
				method: "my.get",
				args: { type: "info" },
				tag: "info"
			}));
		}
		function msg_get_info(data) {
			try {
				$("#cpu").html(data.result.cpu);
				$("#mem").html(data.result.mem);
				$("#mem_f").html(data.result.mem_f);
				$("#date").html(data.result.date);
				$("#title").val(data.result.title);
				$("#th").prop(data.result.th);
			} catch (e) {
				console.log("index.html," + e);
			}
		}
		function msg_update_info(data) {
			try {
				$("#mem_f").html(data.mem_f);
				$("#date").html(data.date);
				$("#th_v").html(data.t + "℃/" + data.h + "%");
			} catch (e) {
				console.log("index.html," + e);
			}
		}
		function msg_hi(data) {
			$("#progress").removeClass("spinner-donut");
			alert(data.msg);
		}
		$("#reboot").click(function (evt) {
			evt.preventDefault();
			$("#progress").addClass("spinner-donut");
			ws.send(JSON.stringify({
				method: "Sys.Reboot",
				args: {},
				tag: "reboot"
			}));
		});

		$("#th_type").click(function (evt) {
			evt.preventDefault();
			var d = {
				method: "Config.Set",
				args: {
					config: {
						dev: {
							title: $("#title").val(),
							th: $("#th").val()
						}
					}
				},
				tag: "save_cfg"
			};
			ws.send(JSON.stringify(d));

		});
		function msg_save_cfg() {
			ws.send(JSON.stringify({
				method: "Config.Save",
				args: { reboot: false },
				tag: "save"
			}));
		}
		//
	});

</script>